{extend name="public:base"}
{block name="body"}
<form class="form-inline" action="http://www.baidu.com">
    <input type="text" name="name">
    <input type="text" name="age">
    <button class="form-control btn btn-danger ajax-post-submit" type="button">ajax提交</button>
    <button class="form-control btn btn-default btn-a" target="_blank" href="http://www.baidu.com">新起一页</button>

        <input type="text" name="n">
        <input type="text" name="ids[]">
        <input type="text" name="ids[]">
        <button type="button" url="{:url('config')}" class="ajax-post-ids">ajax提交ids</button>

</form>
{/block}
{block name="script"}
<script>
    function ajaxAlert(code,msg,wait) {
        var c;
        if(code) {
            c = 'alert-success';
            if(wait){
                setTimeout(function(){
                    location.reload(true);
                },wait*1000);
            }
        }else {
            c = 'alert-danger';
        }
        var window = $('<div class="alert '+c+'" style="position: fixed;top: 90%;left: 50%;min-width: 200px;max-width: 200px;width: 200px;">'+msg+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>').appendTo('body');
        if(wait) {
            setTimeout(function () {
                window.remove();
            },wait * 1000);
        }
    }
</script>
<script>
    /**
     * ajax post请求 url 属性的url
     */
    (function(){
        $('.ajax-post').on('click',function(){
            var url = $(this).attr('url');
            $.post(url,{},function(data,status){
                ajaxAlert(data.code,data.msg,data.wait);
            });
        });
    })();
</script>
<script>
    (function(){
        $('.ajax-post-ids').on('click',function () {
            var url = $(this).attr('url');
            var ids = [];
            $('[name="ids[]"]').each(function (index,elem) {
                ids.push($(this).val());
            });
            $.post(url,{'ids':ids},function (data,status) {
                ajaxAlert(data.code,data.msg,data.wait);
            });
            return false;
        });
    })();
</script>
<script>
    /**
     * 属性含有btn-a者，点击会跳转到url指定url，如果target=_blank则新开一页跳转
     */
    (function(){
        $('.btn-a').on("click",function () {
            var url = $(this).attr('url');
            var target = $(this).attr('target');
            switch (target){
                case '_self':
                    window.location.href=url;
                    break;
                case '_blank':
                    window.open(url);
                    break;
            }
        });
    })();
</script>
<script>
    /**
     * 属性含有ajax-post-submit者，点击后将会发送ajax post 到url属性指定位置，如果没有url则发送到form的action
     */
    (function(){
        function getFormData(form) {
            var values = {};
            var input = form.find('[name]');
            input.each(function(index,ele){
                if($(this).val() && $(this).attr('name')) {
                    var name = $(this).prop('name');
                    var value = $(this).val();
                    if(name.indexOf("[]") > 0) {
                        name = name.replace('[]','');
                        var arr = eval('values.' + name);
                        if(arr) {
                            arr.push(value);
                        }else {
                            arr = [value];
                        }
                        eval("values." + name + "=arr");
                    }
                    eval("values." + name + "=value");
                }
            });
            return values;
        }
        $('.ajax-post-submit').on("click",function () {
            var url = $(this).attr('url');
            var form = $(this).parents("form");
            if(!url) {
                url = form.attr('action');
                if(!url){
                    url = '/';
                }
            }
            var data = getFormData(form);
            console.log(data);
            $.post(url,data,function (data,status) {
                ajaxAlert(data.code,data.msg,data.wait);
            });
            return false;
        })
    })();

</script>
{/block}